<script setup>
import * as echarts from 'echarts'
import {onMounted, ref, watch} from "vue";
const props=defineProps({
  temperatures:{
    type:Array,
    default:()=>[]
  }
})
const temperature=ref()
const option=ref({
  title: {
    left: 'center',
    text: '我国海洋温度',
    textStyle: {
      fontSize: 14//加
      //color:white",
    },
  },
  grid: {
    left: '4%',/*3*/
    right: '3%',/*4*/
    bottom: '8%',/*3*/
    containLabel: true
  },
  xAxis: {
    type: 'category',
    boundaryGap: false,
    //日期
    data: []
  },
  yAxis: {
    type: 'value',
    name: '平均温度(°C)',
    min: 'dataMin',
    max: 'dataMax',
    axisLine: {
      show: true
    },
  },
  series: [
    {
      //温度
      data: [],
      type: 'line',
      symbol: 'none',
      lineStyle: {   // 设置线条样式
        color: 'black'  // 设置为红色
      },
      areaStyle: {
        opacity: 0.6,
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          {
            offset: 0,
            color: 'rgb(255, 158, 68)'
          },
          {
            offset: 1,
            color: 'rgb(255, 70, 131)'
          }
        ])
      },
    }
  ]
})
onMounted(()=>{
  let myChart = echarts.init(temperature.value, 'dark', {
    renderer: 'canvas',
    useDirtyRect: false
  });
  let app = {};
  //初始设置
  // if (option && typeof option.value === 'object') {
    myChart.setOption(option.value);
  // }
  //有真实数据后
  watch(props,()=>{
    for(const tem of props.temperatures){
      option.value.xAxis.data.push(tem.time)
      option.value.series[0].data.push(tem.temperature)
    }
    option.value
    myChart.setOption(option.value);
  })
  window.addEventListener('resize', myChart.resize);
})
</script>

<template>
  <div class="content-left2" ref="temperature"></div>
</template>

<style scoped>
.content-left2{
  /*height:600px;*/
  //border:1px solid red;
  flex-grow:1;
}
</style>
<!--2024/2/2 13:12-->